<template>
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="sidebar">
            <div class="logo">
            </div>
            <div class="info-item">
                <span>用户名称</span>
                <span>{{ userInfo.nickname }}</span>
            </div>
            <div class="info-item">
                <span>手机号码</span>
                <span>{{ userInfo.phone }}</span>
            </div>
            <div class="info-item">
                <span>用户邮箱</span>
                <span>{{ userInfo.email }}</span>
            </div>
            <div class="info-item">
                <span>所属角色</span>
                <span>
                    <el-tag v-for="role in userInfo.roles" type="primary">
                        {{ role.roleName }}
                    </el-tag>
                </span>
            </div>
            <div class="info-item">
                <span>创建日期</span>
                <span>{{ userInfo.createTime }}</span>
            </div>
        </div>
        <!-- 右侧基本资料及选项卡 -->
        <div class="main">


            <div class="tab-header">
                <div :class="{ active: activeTab === 'basic' }" class="tab-item" @click="activeTab = 'basic'">
                    基本资料
                </div>
                <div :class="{ active: activeTab === 'password' }" class="tab-item" @click="activeTab = 'password'">
                    修改密码
                </div>
            </div>
            <div v-show="activeTab === 'basic'">
                <el-form :model="userProfile" label-suffix=":" label-width="120" size="large">
                    <el-form-item label="用户昵称" prop="nickname" required>
                        <el-input v-model="userProfile.nickname" placeholder="用户昵称"></el-input>
                    </el-form-item>

                    <el-form-item label="联系电话" prop="phone" required>
                        <el-input v-model="userProfile.phone" placeholder="联系电话"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="userProfile.email" placeholder="邮箱"></el-input>
                    </el-form-item> {{userProfile.gender}}
                    <el-form-item label="性别" prop="gender" required>
                        <el-radio-group v-model="userProfile.gender">
                            <el-radio :value="0" label="男"/>
                            <el-radio :value="1" label="女"/>
                            <el-radio :value="2" label="保密"/>
                        </el-radio-group>
                    </el-form-item>

                    <div class="form-item btn-group">
                        <button class="btn-save" @click="saveProfile">保存</button>
                    </div>
                </el-form>
            </div>
            <div v-show="activeTab === 'password'">
                <el-form :model="passwordForm" label-suffix=":" label-width="120" size="large">
                    <el-form-item label="当前密码" prop="oldPassword" required>
                        <el-input v-model="passwordForm.oldPassword" show-password type="password"/>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword" required>
                        <el-input v-model="passwordForm.newPassword" show-password type="password"/>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPassword" required>
                        <el-input v-model="passwordForm.confirmPassword" show-password type="password"/>
                    </el-form-item>
                </el-form>
                <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
                <div class="form-item btn-group">
                    <button class="btn-save" @click="changePassword">保存</button>
                    <button class="btn-close" @click="closePassword">关闭</button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import request from '@/api/request'
import {useAccountStore} from "@/store/account.store.js";

export default {
    name: "UserProfile",
    data() {
        return {
            // 左侧个人信息数据
            userInfo: {},

            // 当前激活的选项卡
            activeTab: "basic",
            // 基本资料表单数据
            userProfile: {
                nickname: "",
                phone: "",
                email: "",
                gender: 0,

            },
            // 修改密码表单数据
            passwordForm: {
                oldPassword: "",
                newPassword: "",
                confirmPassword: "",
            },
            // 密码错误提示
            passwordError: "",
        };
    },
    methods: {

        // 获取用户信息
        getUserInfo() {
            request.post(`/system/user/${useAccountStore().user}`)
                .then(response => {
                    this.userInfo = response.data;
                    // 初始化个人资料表单数据
                    this.userProfile = {
                        nickname: response.data.nickname || "",
                        phone: response.data.phone || "",
                        email: response.data.email || "",
                        gender: response.data.gender || "",
                    };
                })
                .catch(error => {
                    console.error('获取用户信息失败:', error);
                    this.$message.error('获取用户信息失败，请稍后再试');
                });
        },
        // 保存基本资料
        saveProfile() {
            request({
                url: '/system/user/updateBasic',
                method: "post",
                data: this.userProfile
            })
                .then(response => {
                    // 这里可以添加保存基本资料的API调用
                    this.$message.success("基本资料已保存！");
                    // 保存成功后重新获取用户信息，更新左侧展示
                    this.getUserInfo();
                })
                .catch(error => {
                    console.error('保存基本资料失败:', error);
                    this.$message.error('保存基本资料失败，请稍后再试');
                });
        },
        // 关闭基本资料编辑
        closeProfile() {
            // 重新获取用户信息，恢复为最新数据
            this.getUserInfo();
            this.activeTab = "basic";
        },
        // 修改密码
        changePassword() {
            // 简单验证
            if (!this.passwordForm.oldPassword) {
                this.passwordError = "请输入当前密码";
                return;
            }

            if (!this.passwordForm.newPassword) {
                this.passwordError = "请输入新密码";
                return;
            }

            if (this.passwordForm.newPassword.length < 6) {
                this.passwordError = "新密码长度至少为6位";
                return;
            }

            if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
                this.passwordError = "两次输入的新密码不一致";
                return;
            }

            request.post('/system/user/updatePwd', this.passwordForm)
                .then(response => {
                    if (response.code === 200) {
                        this.$message.success("密码修改成功！");

                        // 重置表单
                        this.passwordForm = {
                            oldPassword: "",
                            newPassword: "",
                            confirmPassword: "",
                        };
                        this.passwordError = "";
                    }else {
                        this.$message.error(response.data);
                    }

                })
                .catch(error => {
                    console.error('修改密码失败:', error);
                    this.$message.error('修改密码失败，请稍后再试');
                    if (error.response && error.response.data && error.response.data.message) {
                        this.passwordError = error.response.data.message;
                    } else {
                        this.passwordError = '修改密码异常，请检查输入或联系管理员';
                    }
                });
        },
        // 关闭密码修改
        closePassword() {
            this.passwordForm = {
                oldPassword: "",
                newPassword: "",
                confirmPassword: "",
            };
            this.passwordError = "";
            this.activeTab = "basic";
        },
    },
    mounted() {
        // 组件加载完成后，自动拉取用户信息
        this.getUserInfo();
    }
};

</script>

<style scoped>
/* 整体布局样式 */
.container {
    display: flex;
    font-family: Arial, sans-serif;
    background: #fff;
}

/* 左侧个人信息栏样式 */
.sidebar {
    width: 300px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 16px;
    margin-right: 20px;
}

.sidebar .logo {
    text-align: center;
    margin-bottom: 16px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.sidebar .logo img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.sidebar .info-item {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;

}

/* 右侧基本资料区域样式 */
.main {
    flex: 1;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 16px;
}

.tab-header {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

.tab-header .tab-item {
    padding: 8px 16px;
    cursor: pointer;
    margin-right: 8px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.tab-header .tab-item.active {
    border: 1px solid #eee;
    border-bottom: 1px solid #fff;
    color: #409eff;
}

.form-item {
    margin-bottom: 16px;
    display: flex;
    /*使用flex布局让lable和input在同一行*/
    align-items: center;

}

.form-item label {
    display: inline-block;
    width: 120px;
    text-align: left;
    margin-right: 5px;
    font-size: 14px;
    /*加大文字*/
    font-weight: bold;
    /*加粗文字*/
    color: #666;

}

.form-item input {
    padding: 6px;
    flex: 1;
    min-width: 280px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 0;
}

.gender-radio {
    margin-left: 0;
}

.gender-radio label {
    width: auto;
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
}

.gender-radio input {
    margin-right: 5px;
    min-width: auto;
    width: 16px;
    height: 16px;
    margin-left: 100px;
}

.btn-group {
    margin-left: 128px;
}

.btn-group button {
    padding: 6px 16px;
    margin-right: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-save {
    background-color: #409eff;
    color: #fff;
}

.btn-save:hover {
    background-color: #66b1ff;
}

.btn-close {
    background-color: #f56c6c;
    color: #fff;
}

.btn-close:hover {
    background-color: #f78989;
}

/* 错误提示样式 */
.error-message {
    color: #f56c6c;
    margin-left: 128px;
    margin-top: 4px;
    font-size: 14px;
}
</style>